import React, {Component} from 'react';
import menuStore from './store/index';
import {Form, Input, Radio, TreeSelect } from 'antd';
import './MenuManagement.less';
import {deepCopy} from '../../util/ObjUtil';
import {set_edit_menu_form} from './store/Constant';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

class EditMenu extends Component {

    constructor(props) {
        super(props);
        this.state = menuStore.getState();

        this.mapHandle=this.mapHandle.bind(this);
    }

    render() {
        let {getFieldDecorator} = this.props.form;
        let formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };
        let menuTree=this.createMenuTree();
        return (
            <div>
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label={"菜单名称"}>
                        {getFieldDecorator('name', {
                            initialValue: this.isInitialValue() ? this.props.record.name : null,
                            rules: [{min: 1, max: 8, required: true}]
                        })(
                            <Input placeholder="菜单名称"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"菜单类型"}>
                        {getFieldDecorator('type', {
                            initialValue: this.isInitialValue() ? this.props.record.type : null,
                            rules: [{required: true}]
                        })(
                            <RadioGroup>
                                <Radio value={0}>菜单</Radio>
                                <Radio value={1}>资源</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"菜单图标"}>
                        {getFieldDecorator('icon', {
                            initialValue: this.isInitialValue() ? this.props.record.icon : null,
                            rules: [{min: 1, required: true}]
                        })(
                            <Input placeholder="菜单图标"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"父级菜单"}>
                        {getFieldDecorator('prentId', {
                            initialValue: this.isInitialValue() ? this.props.record.prentId : this.props.record.id,
                            rules: [{required: true}]
                        })(
                            <TreeSelect
                                dropdownStyle={{ maxHeight: 300, overflow: 'scroll' }}
                                treeData={menuTree}
                                placeholder="请选择父级菜单"
                            />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"前端组件"}>
                        {getFieldDecorator('component', {
                            initialValue: this.isInitialValue() ? this.props.record.component : null,
                            rules: [{required: false}]
                        })(
                            <Input placeholder="前端组件"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"资源链接"}>
                        {getFieldDecorator('url', {
                            initialValue: this.isInitialValue() ? this.props.record.url : null,
                            rules: [{required: false}]
                        })(
                            <TextArea rows={4} placeholder="资源链接"/>
                        )}
                    </FormItem>
                </Form>
            </div>
        )
    }

    componentDidMount(){
        menuStore.dispatch({
            type:set_edit_menu_form,
            editMenuForm:this.props.form
        });
    }

    isInitialValue() {
        return this.props.action==='edit';
    }

    createMenuTree(){
        let menuTree = deepCopy(this.props.menuTree);
        menuTree.map(this.mapHandle);
        return menuTree;
    }

    mapHandle(item,key){
        item.title=item.name;
        item.value=item.id;
        item.key=item.id;
        if (item.children){
            item.children.map(this.mapHandle);
        }
    }
}

export default Form.create()(EditMenu);